<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="/static/css/hui.css">
    <style>
        .portrait {
            height: 80px;
            width: 80px;
            margin: 0 auto;
            border-radius: 50%;
            position: relative;
        }

        .portrait>input {
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            top: 0;
            left: 0;

        }

        .portrait>img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <header class="hui-header">
        <div id="hui-back"></div>
        <h1>注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
    </header>

    <div class="hui-wrap">
        <form style="padding:28px 10px;" class="hui-form" id="form1" enctype="multipart/form-data">
            <div class="portrait">
                <img id="portraitShow" src="/static/uploads/user_default.png">
                <input id="uploaderPic" name="uploaderPic" type="file" accept="image/*" multiple="">
            </div>
            <!--  -->
            <div class="hui-form-items">
                <div class="hui-form-items-title">手机号码</div>
                <input type="number" class="hui-input" placeholder="请输入手机号码" id="account" name="account" checktype="phone" 
                checkmsg="手机号码格式错误">
            </div>
            <div class="hui-form-items">
                <div class="hui-form-items-title">昵称</div>
                <input type="text" class="hui-input hui-input-clear" placeholder="请输入昵称" id="nickname" name="nickname" checktype="nickname"
                    checkmsg="昵称应为2-6个字母数字，字母开头">
            </div>
            <div class="hui-form-items">
                <div class="hui-form-items-title">登录密码</div>
                <input type="password" class="hui-input hui-pwd-eye" placeholder="登录密码" checktype="passWord" id="pwd" checkmsg="密码应由字母和数字组成的6-12个字符">
                <div class="hui-pwd-eyes" onclick="hui.eyesChange(this);"></div>
            </div>
            <div class="hui-form-items">
                <div class="hui-form-items-title">确认密码</div>
                <input type="password" class="hui-input hui-pwd-eye" placeholder="确认密码" checktype="sameWithId" checkdata="pwd" checkmsg="两次密码不一致">
                <div class="hui-pwd-eyes" onclick="hui.eyesChange(this);"></div>
            </div>
            <div style="padding:15px 8px;">
                <button type="button" class="hui-button hui-button-large hui-primary" id="regBtn">提交注册</button>
            </div>
        </form>
    </div>


    <script type="text/javascript" src="/static/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/static/js/hui.js"></script>
    <script type="text/javascript" src="/static/js/hui-form.js"></script>
    <script>


        // 头像预览
        var pic;
        $('#uploaderPic').change(function () {
            $("#portraitShow").attr("src", URL.createObjectURL($(this)[0].files[0]));
            pic = $(this)[0].files[0];

        })




        $('#regBtn').click(function () {
            if (hui("#portraitShow").attr("src") == '/static/uploads/user_default.png') {
                hui.toast('请选择头像');
            } else {
                //表单验证
                hui.formInit();
                var res = huiFormCheck('#form1');
                //提交
                if (res) {
                    // hui.iconToast('验证通过！');
                    // var data = hui.getFormData('#form1');

                    // console.log(JSON.stringify(data));
                    var formData = new FormData()
                    formData.append('pic', pic);
                    formData.append('account', hui('#account').val());
                    formData.append('nickname', hui('#nickname').val());
                    formData.append('paw', hui('#pwd').val());

                    $.ajax({
                        url: 'http://127.0.0.1:5000/regist/',
                        data: formData,
                        type: 'POST',
                        cache: false,
                        dataType: 'json',

                        //必须false才会避开jQuery对 formdata 的默认处理 
                        // XMLHttpRequest会对 formdata 进行正确的处理
                        processData: false,
                        //必须false才会自动加上正确的Content-Type 
                        contentType: false,

                        xhrFields: {
                            withCredentials: true
                        },
                        beforeSend: function () { hui.loading(); },
                        complete: function () { hui.closeLoading(); },
                        success: function (data) {

                            if (data.code == 1) {
                                hui('#account').val('');
                                hui('#nickname').val('');
                                hui('#paw').val('');
                                hui('#paw2').val('');
                                hui.iconToast('验证通过！');
                                window.location.href = "http://127.0.0.1:5000/login/";
                            } else {
                                hui.iconToast(data.message, 'error');
                            }
                        }
                    });
                }
            }

        });

    </script>
</body>

</html>